<template>
<div>
  <van-nav-bar
      title="秒杀详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="setting-o" color="black" size="20" />
    </template>
  </van-nav-bar>
  <div class="shopSwipe">
    <van-swipe :autoplay="3000" width="100%" height="200">
      <van-swipe-item v-for="(image, index) in shopLists.img" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <ul class="abox">
    <li id="zy">
      <div class="cbox"><div>￥{{shopPrice}}.00</div><div>￥{{shopLists.oldPrice}}<div class="row"></div></div><van-tag plain type="primary">秒杀</van-tag></div>
      <div>只剩{{shopLists.goodsStock}}件</div>
    </li>
    <li>{{shopLists.goodsDesc}}</li>
    <li><div class="bbox"><div><van-icon name="hot" color="red" />{{shopTags.tagName}}</div><div><van-icon name="hot" color="red" />{{shopTags.tagDescribe}}</div></div></li>
  </ul>
  <div>
    <div>
      <div class="cbox"><div>更多伙伴</div><div @click="goBack">查看更多<van-icon name="arrow"  size="16"/></div></div>
      <div class="dbox">
        <van-swipe style="height: 100px;" vertical loop autoplay="2000">
          <van-swipe-item v-for="item in userTou" :key="item[0].id">
            <div class="user">
              <div><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="头像"><span>{{item[0].userName}}</span></div>
              <div><span>正在秒杀</span><van-button @click="goBack" color="#FF6633" size="mini">去秒杀</van-button></div>
            </div>
            <div class="user">
              <div><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="头像"><span>{{item[1].userName}}</span></div>
              <div><span>正在秒杀</span><van-button @click="goBack" color="#FF6633" size="mini">去秒杀</van-button></div>
            </div>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator"></div>
          </template>
        </van-swipe>
      </div>
    </div>
  </div>
  <div>
    <div class="cbox"><div>宝贝评价</div><div @click="allUser">查看全部<van-icon name="arrow"  size="16"/></div></div>
    <div>
      <ul class="ebox">
        <li v-for="i in commentLists" :key="i.userId">
          <div><img :src="i.userIcon" alt=""><span>{{i.userName}}</span></div>
          <div>{{i.commentContent}}</div>
        </li>
      </ul>
    </div>
  </div>
  <van-goods-action>
    <van-goods-action-icon icon="chat-o" text="客服" />
    <van-goods-action-icon icon="shop-o" text="收藏" />
    <van-goods-action-button @click="goTo" color="#FF6633" text="立即秒杀" />
  </van-goods-action>
</div>
</template>

<script>
import Vue from 'vue';
import {Lazyload, Toast} from 'vant';
Vue.use(Lazyload);
export default {
name: "productDetails",
  data() {
    return {
      images: [
        'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/9c8e4afbe8174349ad8bf3a0d4cac457.jpg!sswm',
        'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/2eccf42e29594ebf9e94021477db8ef9.png!sswm',
        'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/36912be95c1a400c8fbea09ca6512aca.jpeg!sswm',
        'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/a5fdc384944b4cf6aa6e4ac9af813ff2.png!sswm',
      ],
      list: [],
      loading: false,
      finished: false,
      id:this.$route.query.shopId,
      shopPrice:this.$route.query.shopPrice,
      shopLists:'',
      shopTags:'',
      flashId:this.$route.query.flashId,
      userTou:[[{
        id:1,
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'孙大庆'
      },{
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'李二狗'
      }],[{
        id:2,
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'李青候'
      },{
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'冯伊人'
      }],[{
        id:3,
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'雪箐箐'
      },{
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'路遥'
      }],[{
        id:4,
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'徐凤年'
      },{
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'风紧扯呼'
      }],[{
        id:5,
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'九曲伊通'
      },{
        tou:'https://img01.yzcdn.cn/vant/cat.jpeg',
        userName:'路九涯'
      }]],
      commentLists:[],
      goodsFormatList:'',
    };
  },
  mounted() {
  this.shopLoading();
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1);
    },
    onClickRight() {
      Toast('按钮');
    },
    shopLoading(){
      console.log(this.id)
      this.$axios.post('/api/marketGoods/goodsDetail?goodsId='+this.id).then((res)=>{
        let conductList=res.data.data;
        console.log(conductList);
        this.goodsFormatList=conductList.goodsInfo.goodsFormatList;
        let conList=conductList.goodsInfo;
        let commentList=conductList.commentList;
        //以下是用户评价相关
        commentList.forEach((item,i)=>{
          item.userId=i;
          item.userIcon="https://img01.yzcdn.cn/vant/cat.jpeg";
          this.commentLists.push(item);
        })
        //以下是商品处理方法
        if(conList.imgs.length<2){
          conList.img=[];
          this.images.forEach((item)=>{
            conList.img.push(item);
          })
        }else {
          conList.img=[];
          conList.imgs.forEach((item)=>{
            conList.img.push('http://172.17.4.241:8887/upload/'+item.imgUrl);
          })
        }
        if(conList.goodsDesc.length<6){
          conList.goodsDesc='最贵奢华水果绿茶水果女士淡香清新单眼学生非持久绿茶味';
        }
        if(conList.goodsStock<1){
          conList.goodsStock=1;
        }
        conList.oldPrice=conList.goodsPrice;
        if (conList.tags[0]){
          this.shopTags=conList.tags[0];
        }else {
          this.shopTags={tagDescribe:'包退',tagName:'正品'};
        }
        this.shopLists=conList;
      })
    },
    goBack(){
      this.$router.go(-1);
    },
    allUser(){
      Toast('就这些了没了');
    },
    goTo(){
      console.log(this.goodsFormatList)
      let helpOrder={
        //goodsId
        goodsId:this.id,
        //订单规格id
        goodsFormatId:this.goodsFormatList[0].goodsFormatId,
        //订单类型
        buyState:3,
        //队伍id
        flashId:this.flashId,
        //价格
        flashPrice:this.shopPrice
      }
      this.$router.push({name:'success',query:helpOrder});
    }
  },
}
</script>

<style scoped>
.abox li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:2px 10px 2px 5px;
}
.abox>li:nth-child(2){
  padding-left: 10px;
}
#zy{
  display: flex;
  height: 25px;
  align-items: center;
}
#zy>div:last-child{
  height: 15px;
}
.abox li:first-child>div:first-child{
  display: flex;
  align-items: center;
}
.abox li:first-child>div:first-child>div:first-child{
  font-weight: bold;
  font-size: 20px;
  color: orangered;
}
.abox li:first-child>div:first-child>div:nth-child(2){
  font-size: 18px;
  font-weight: bold;
  color: #a19e9e;
  margin-left: 5px;
  position: relative;
}
.row{
  width: 50px;
  height: 2px;
  position: absolute;
  background-color: gray;
  top: 50%;
}
.abox li:nth-child(2){
  font-weight: bold;
  text-align: left;
}
.bbox{
  display: flex;
  flex-wrap: wrap;
}
.bbox>div{
  margin-left: 5px;
  color: gray;
  font-size: 14px;
}
.bbox>div:first-child{
  margin-left: 0;
}
.cbox{
  display: flex;
}
.dbox>div:first-child{
  font-size: 12px;
  line-height: 20px;
  font-weight: bold;
}
.cbox{
  display: flex;
  justify-content: space-between;
  padding: 0px 10px 0px 10px;
  margin-top: 10px;
  align-items: center;
}
.cbox>div:first-child{
  font-weight: bold;
}
.cbox>div:nth-child(2){
  color: #a19e9e;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.dbox{
  height: 100px;
  margin-top: 20px;
}
.ebox{
  margin-bottom: 50px;
}
.ebox>li{
  height: 60px;
  overflow: hidden;
  margin-top: 15px;
  padding: 0px 10px 0px 10px;
}
.ebox>li>div:last-child{
  text-align: left;
  margin-top: 10px;
}
.user{
  height: 30px;
  display: flex;
  justify-content: space-between;
  padding: 5px 15px 5px 15px;
  align-items: center;
  background-color: #FFF3EF;
  margin-bottom: 10px;
}
.user img{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 10px;
}
.user>div{
  display: flex;
  align-items: center;
}
.user span{
  font-weight: bold;
}
.user>div button{
  margin-left: 10px;
}
.ebox>li>div:first-child>img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.ebox>li>div:first-child{
  display: flex;
  align-items: center;
  font-weight: bold;
}
.ebox>li>div:first-child>span{
  font-size: 14px;
}
.ebox>li>div:last-child{
  font-size: 12px;
  color: gray;
}
.shopSwipe .van-swipe__track img{
    width: 100%;
    height: 100%;
  }
</style>